<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>Just For Fun</title>
    <meta name="keywords" content="瀑布流,jQuery,waterfall,woo" />
    <link rel="stylesheet" href="/static/vendors/waterfall/css/reset.css" />
    <link rel="stylesheet" href="/static/css/base.css" />

    <!--<script src="//g.alicdn.com/kissy/k/1.4.8/seed-min.js"></script>-->
    <!--<script src="http://g.tbcdn.cn/kissy/k/1.3.2/seed.js"></script>-->
    <script src="/static/kissy/build/seed.js"></script>
    <script src="/static/js/jquery.js"></script>
    <style>
        .container {
            position: relative;
            margin-top: 70px;
            /*width: 1081px;*/
            /*margin: 0 auto;*/
        }
        
        .ks-waterfall {
            position: absolute;
            width: 300px;
            overflow: hidden;
            padding: 15px;
            border: 2px solid #ddd;
            margin-bottom: 20px;
            text-align: center;
            left: -9999px;
            top: -9999px;
        }
        
        .title {
            color: #000;
            display: block;
            font-size: 18px;
            font-weight: 400;
            line-height: 1.5em;
            outline: 0 none;
            padding: 1em 0.5em 0.2em;
            text-align: center;
        }
    </style>
</head>

<body>
    <!--菜单栏-->
    <% include ../templates/header.html %>
        <div id="container" class="container">

        </div>
        <script type="tpl" id="tpl">
            <div class="ks-waterfall">
                <div class="title"><a href='https://cnodejs.org/topic/{id}' target='_blank'>{title}</a></div>
                <img src="{path}" alt="" style="width:300px;height:{height}px" />
                <div class="content">{description}</div>
            </div>
        </script>
        <script>
            KISSY.use('waterfall, ajax, node, button', function(S, Waterfall, IO, Node, Button) {
                var tpl = ($('#tpl').html()),
                    nextpage = 1,
                    waterfall = new Waterfall.Loader({
                        container: "#container",
                        minColCount: 2,
                        diff: 1,
                        colWidth: 340,
                        load: function(success, end) {
                            new IO({
                                data: {
                                    'page': nextpage,
                                    'per_page': 10,
                                    'format': 'json'
                                },
                                url: 'api/article/waterfalllist',
                                dataType: 'json',
                                success: function(d) {
                                    nextpage = parseInt(d['nextpage']) + 1;
                                    if (nextpage > d['pagenum']) {
                                        end();
                                        return;
                                    }

                                    var items = [];
                                    S.each(d['items'], function(item) {
                                        item.path = 'https://dn-cnode.qbox.me/FnbE4WGUmsPhktAPMpIeEphgwOkG';
                                        item.path=item.img;
                                        //item.height = 120;
                                        items.push(new S.Node(S.substitute(tpl, item))); //tpl.render(item) 前面提到的通过模版生成内容。  
                                    });
                                    success(items);
                                }
                            })
                        }
                    });
            })
        </script>
</body>

</html>